<template>
	<popup v-model="show">
		<view class="layer flex" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="userTitle">第三方绑定</view>
			<image src="/static/img/S6O.png" mode="widthFix" class="waring"></image>
			<view class="userDesc">
				提示：一旦解除以下第三方平台后，将不可使用对应方式登录。
			</view>
			<view class="infoList" v-if="info">
				<view class="item flex">
					<image src="/static/img/8Ap.png" mode="widthFix"></image>
					<text class="ell">微信</text>
					<text class="btn active" v-if="!info.bindWx" @tap="bind('weixin')">去绑定</text>
					<text class="btn" v-else @tap="unBind('wechat')">解绑</text>
				</view>
				<view class="item flex">
					<image src="/static/img/QQ.png" mode="widthFix"></image>
					<text class="ell">QQ</text>
					<text class="btn active" v-if="!info.bindQq" @tap="bind('qq')">去绑定</text>
					<text class="btn" v-else @tap="unBind('qq')">解绑</text>
				</view>
				<view class="item flex" v-if="app.config.osName === 1">
					<image src="/static/img/apple.png" mode="widthFix"></image>
					<text class="ell">苹果</text>
					<text class="btn active" v-if="!info.bindIos" @tap="bind('apple')">去绑定</text>
					<text class="btn" v-else @tap="unBind('apple')">解绑</text>
				</view>
			</view>
			<loading v-else></loading>
			<footer-bar></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineProps, defineExpose } from "vue";
	const app = inject('app');
	const root = inject("root");
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 基本信息
		info: {
			type: Object,
			default: {}
		},
		
	});
	
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	
	/* 方法区域 */
	// 绑定第三方
	async function bind(type){
		root.commonToastRef.value.open({ type: "loading", text: "绑定中.." });
		try{ await app.util.empowerLogout(type); }catch(e){}
		
		uni.login({
			provider: type,
			onlyAuthorize: true, // 微信登录仅请求授权认证
			success(res) {
				// 登录类型1:微信，2：QQ，3：苹果，5：手机登录
				let payload = ({
					weixin: () => ({ url: "/api/userThirdAccount/bindWechat", code: res.code }),
					qq: () => ({ url: "/api/userThirdAccount/bindQQ", access_token: res.authResult.access_token }),
					apple: () => ({ url: "/api/userThirdAccount/bindApple", appleInfo: JSON.stringify(res.appleInfo) }),
				})[type]();
				
				app.request.ajax({
					url: payload.url,
					data: payload,
					method: "POST",
					success(res){
						root.commonToastRef.value.close();
						// _this.$root.getData();
					},
					error(err){
						root.commonToastRef.value.close();
						root.commonToastRef.value.open({ type: "warning", text: err.msg || "绑定失败" });
					}
				});
			},
			fail(res) {
				root.commonToastRef.value.close();
			}
		});
	}
	
	// 解绑第三方
	function unBind(type){
		let _this = this;
		root.alert.value.open({
			title: "提示",
			content: "解绑后将无法通过该方式登录，确定要解绑吗？",
			success(res) {
				if (res.confirm) {
					root.commonToastRef.value.open({ type: "loading", text: "解绑中.." });
					app.request.ajax({
						url: "/api/userThirdAccount/unbind",
						method: "POST",
						data: { platform_name: type },
						success(res){
							root.commonToastRef.value.close();
							// _this.$root.getData();
						},
						error(err){
							root.commonToastRef.value.close();
							root.commonToastRef.value.open({ type: "warning", text: err.msg || "解绑失败" });
						}
					});
				}
			}
		});
	}
	
	// 打开弹窗
	function open() {
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.layer {
		background: #232526;
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100vw;
		padding: 0 33rpx 45rpx 33rpx;
		position: relative;
		.waring {
			position: absolute;
			right: 50rpx;
			top: 60rpx;
			width: 110rpx;
		}
		.userTitle {
			font-weight: bold;
			font-size: calc(38rpx * var(--fss));
			line-height: 70rpx;
			position: relative;
			color: rgba(255, 255, 255, 0.9);
			&:after {
				content: "";
				position: absolute;
				bottom: -20rpx;
				left: 0;
				width: 70rpx;
				height: 8rpx;
				background-color: $background;
			}
		}
		.userDesc {
			font-size: calc(26rpx * var(--fss));
			color: rgba(255, 255, 255, 0.6);
			line-height: 42rpx;
			margin-top: 70rpx;
		}
		.infoList {
			margin-top: 40rpx;
			.item {
				flex-direction: row;
				align-items: center;
				margin-bottom: 44rpx;
				&:nth-last-child(1) {
					margin-bottom: 0;
				}
				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				.ell {
					font-size: calc(26rpx * var(--fss));
					font-weight: bold;
					color: rgba(255, 255, 255, 0.9);
					flex: 1;
					width: 0;
					margin: 0 27rpx;
				}
				.btn {
					font-size: calc(26rpx * var(--fss));
					transition: 0.2s all;
					background: rgba(255, 255, 255, 0.07);
					color: rgba(255, 255, 255, 0.9);
					width: 130rpx;
					text-align: center;
					border-radius: 6rpx;
					line-height: 50rpx;
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>